<template>
  <div>
    <h2>父组件</h2>
    <p>name: <input v-model="name"></p>
    <p>age: <input type="number" v-model="age"></p>
    <p>子组件值：{{count}}</p>
    <p>子组件值2：{{text}}</p>
    <h2>子组件</h2>
    <child :name="name" :age="age" :changeText="changeText" @sendValue="handleSendValue"></child>
  </div>
</template>

<script lang="ts" setup>
    import {ref} from "vue";
    import Child from "./Child";

    let name = ref("");
    let age = ref();
    let count = ref(0);
    let text = ref("");

    function handleSendValue(v) {
        console.log("value = ",v)
        count.value = v;
    }

    function changeText(v) {
        text.value = v;
    }
    
</script>

<style scoped>

</style>